import React, { Component, Fragment } from "react";
// antd
import { Button, Col, Form, Tag, Select, DatePicker, Card, Row } from "antd";
import { Chart, Coordinate, Interval, Interaction } from 'bizcharts';


// http
import http from '../../../utils/request';
import moment from 'moment';

const { Option } = Select;
const { RangePicker } = DatePicker;



class CloudAppkeyDashboard extends Component {
    constructor(props){
        super(props);
        this.state = {
            // 表格分页

            loading: false,
            search_account_name: null,
            search_platform: null,
            search_option_account: [],
            search_option_platform: [],

            begin_date: null,
            end_date: null,

            total_amount: null,
            total_appkey: null,
            total_account: null,
            appkey_list: [],
            account_list: [],
        }

    }

    componentDidMount() {
        this.loadData()
        this.loadDataPlatform()
    }

    loadDataPlatform = () => {
        const requestData = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/cloud/platform', {params: requestData}).then(response=>{
            const search_option_platform = []
            const resp_data = response.data.data.items
            for (let i = 0; i < resp_data.length; i++) {
                search_option_platform.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
            }
            this.setState({
                search_option_platform: search_option_platform
            })
        })
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'begin_date': this.state.begin_date,
            'end_date': this.state.end_date,          
            'platform': this.state.search_platform,
            'account_name': this.state.search_account_name,
            'operation_type': 'cloud_appkey_dashboard',
        }

        // 获取分组列表
        http.get('/cloud/appkey/dashboard', {params: requestData}).then(response=>{
            const resp_data = response.data.data
            this.setState({
                total_amount: resp_data.total_amount,
                total_account: resp_data.total_account,
                total_appkey: resp_data.total_appkey,
                appkey_list: resp_data.appkey,
                account_list: resp_data.account,
                loading: false,
            })
        }).catch()
    }

    /** 切换每页数量 */
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
    }

    /** 云平台搜索 */
    onFinishSearch = (data) => {
        this.setState({
            page: 1,
            search_account_name: data.account_name ? data.account_name : null,
            search_platform: data.platform ? data.platform : null,
            loading: true
        })
        this.loadData()
    }

    // 搜索切换云平台
    onChangePlatform = (value) => {
        if (value) {
            this.setState({
                search_instance_platform: value
            })

            const requestData = {
                'page': 1,
                'limit': 1000,
                'platform': value
            }
    
            http.get('/cloud/account', {params: requestData}).then(response=>{
                const search_option_account = []
                const resp_data = response.data.data.items
                for (let i = 0; i < resp_data.length; i++) {
                    search_option_account.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
                }
                this.setState({
                    search_option_account: search_option_account
                })
            })

        } else {
            this.setState({
                search_option_account: '',
            })
        }
    }

    // 搜索云账户
    onChangeAccountName = (value) => {
        this.setState({
            search_account_name: value ? value : null
        })
    }

    onChangeDate = (value, dateString) => {
        this.setState({
            begin_date: dateString[0] ? dateString[0] : null,
            end_date: dateString[1] ? dateString[1] : null,
        })
    }

    render(){
        const { loading, search_option_platform, search_option_account, total_amount, total_appkey, total_account, account_list, appkey_list } = this.state
        var myStyle = {margin: '5px'}
        var myStyle1 = {marginBottom: '30px', color: "#676767"}
        var myStyle2 = {marginBottom: '10px', color: "#676767"}
        var myStyleAlarm = {color: '#676767'}

        console.log(account_list,121212)

        return (
            <Fragment>
                <Card>
                    <Row>
                        <Form layout="inline" onFinish={this.onFinishSearch}>
                            <Form.Item label="日期" name="dates">
                                <RangePicker
                                    ranges={{
                                        Today: [moment(), moment()],
                                            'This Month': [moment().startOf('month'), moment().endOf('month')],
                                    }}
                                    onChange={this.onChangeDate} /> 
                            </Form.Item>

                            <Form.Item label="云平台" name="platform">
                                <Select
                                    allowClear
                                    showSearch
                                    style={{ width: 180 }}
                                    placeholder="请选择区域"
                                    optionFilterProp="children"
                                    onChange={this.onChangePlatform}
                                    filterOption={(input, option) =>
                                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    }
                                >
                                    {search_option_platform}
                                </Select>
                            </Form.Item>

                            <Form.Item label="云账户" name="account_name">
                                <Select
                                    allowClear
                                    showSearch
                                    style={{ width: 180 }}
                                    placeholder="请选择云账户"
                                    onChange={this.onChangeAccountName}
                                    >
                                    {search_option_account}
                                </Select>                      
                            </Form.Item>


                            <Form.Item shouldUpdate={true}>
                                <Button type="primary" htmlType="submit" loading={loading}>搜索</Button>
                            </Form.Item>
                        </Form>
                    </Row>
                </Card>

                <div style={myStyle}></div>
                
                <Row>
                    <Col span={8}>           
                        <Card>
                            <div style={myStyle2}>总费用</div>
                            <span style={myStyleAlarm}>{total_amount}</span> 
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card>
                            <div style={myStyle2}>账户个数</div>
                            <span style={myStyleAlarm}>{total_account}</span>
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card>
                            <div style={myStyle2}>应用个数</div>
                            <span style={myStyleAlarm}>{total_appkey}</span>
                             
                        </Card>
                    </Col>
                </Row>

                <div style={myStyle}></div>

                <Row>
                    <Col span={12}>
                        <Card>
                            <div style={myStyle1}><Tag color="">账户费用TOP10   (单位: 元)</Tag></div>
                            <Chart
                                height={400}
                                data={account_list}
                                autoFit
                                scale={{
                                // amount: {
                                //     formatter: (v) => Math.round(v / 100) + " 百",
                                // },
                                }}
                                onAxisLabelClick={(event, chart) => {
                                console.log("event", event, "chart", chart);
                                console.log("data", chart.filteredData);
                                            console.log("mytext", event.target.attrs.text);
                                console.log("selectedRecord", chart.getSnapRecords(event)[0]._origin);
                                }}
                            >
                                <Coordinate transpose />
                                <Interval
                                position="account*amount"
                                label={[
                                    "amount",
                                    (val) => ({
                                    position: "middle", // top|middle|bottom|left|right
                                    offsetX: 0,
                                    // content: numeral(val).format('0,0'),
                                    style: {
                                        fill: "#fff",
                                    },
                                    }),
                                    // {
                                    //   layout: {
                                    //     type: "overlap",
                                    //   },
                                    // },
                                ]}
                                />
                                <Interaction type="active-region" />
                            </Chart>
                        </Card>
                    </Col>

                    <Col span={12}>
                        <Card>
                            <div style={myStyle1}><Tag color="">应用费用TOP10   (单位: 元)</Tag></div>
                            <Chart
                                height={400}
                                data={appkey_list}
                                autoFit
                                scale={{
                                // amount: {
                                //     formatter: (v) => Math.round(v / 1000) + "K",
                                // },
                                }}
                                onAxisLabelClick={(event, chart) => {
                                console.log("event", event, "chart", chart);
                                console.log("data", chart.filteredData);
                                            console.log("mytext", event.target.attrs.text);
                                console.log("selectedRecord", chart.getSnapRecords(event)[0]._origin);
                                }}
                            >
                                <Coordinate transpose />
                                <Interval
                                position="appkey*amount"
                                label={[
                                    "amount",
                                    (val) => ({
                                    position: "middle", // top|middle|bottom|left|right
                                    offsetX: 0,
                                    // content: numeral(val).format('0,0'),
                                    style: {
                                        fill: "#fff",
                                    },
                                    }),
                                    // {
                                    //   layout: {
                                    //     type: "overlap",
                                    //   },
                                    // },
                                ]}
                                />
                                <Interaction type="active-region" />
                            </Chart>
                        </Card>
                    </Col>
                </Row>

            </Fragment>
        )
    }
}
export default CloudAppkeyDashboard;